<template>
    <div>
        <n-row>
            <n-col :span="8">
                <n-statistic label="用户数量" :value="sseStore.user_count">
                </n-statistic>
            </n-col>
            <n-col :span="8">
                <n-statistic label="流水线数量" :value="sseStore.pipeline_count">
                </n-statistic>
            </n-col>
            <n-col :span="8">
                <n-statistic label="webhook数量" :value="sseStore.webhook_count">
                </n-statistic>
            </n-col>
        </n-row>
        <n-row>
            <n-text style="font-size: 20px">{{ sseStore.message_time }}</n-text>
        </n-row>
        <n-row>
            <n-text style="font-size: 20px">{{ sseStore.message_datetime }}</n-text>
        </n-row>
    </div>
</template>

<script lang="ts" setup>
// import {People as PeopleIcon,AnalyticsOutline as AnalyticsOutlineIcon } from '@vicons/ionicons5'
import {onBeforeUnmount, onMounted} from "vue";
import {getPipelineList} from "@/api/pm/pipeline.ts";
import {getUserList} from "@/api/sm/user.ts";
import {useSseStore} from "@/stores";
import {getWebhookList} from "@/api/pm/webhook.ts";
import WebSocketService from "@/utils/ws.ts"
import {Constants} from "@/enums/constants.ts";

const sseStore = useSseStore()

const websocket = new WebSocketService("ws://localhost:8080/ws/"+sessionStorage.getItem(Constants.STORAGE_KEY_USERNAME));

// 发送消息示例
const sendMessage = () => {
    websocket.send({type: 'chat', content: 'Hello,' + +sessionStorage.getItem(Constants.STORAGE_KEY_USERNAME)});
}

onMounted(() => {
    getUserList().then(res => {
        sseStore.user_count = res.data.length
    })

    getPipelineList().then(res => {
        sseStore.pipeline_count = res.data.length
    })

    getWebhookList().then(res => {
        sseStore.webhook_count = res.data.length
    })
    websocket.connect();
    sendMessage()
})
onBeforeUnmount(() => {
    websocket.close();
})
</script>

<style></style>
